import React, {Component} from 'react';
import EventHandler from "../../rx/EventHandler";
import TodoItem from "./TodoItem";
import TodoActions from "./actions/BookManagerActions";

class TodoList extends Component{
    componentWillMount() {
        var toggleAllChange = EventHandler.create();
        toggleAllChange
            .map(function (event) {
                return event.target.checked;
            })
            .subscribe(TodoActions.toggleAll);

        this.handlers = {
            toggleAllChange: toggleAllChange
        }
    }

    render () {
        var todoItems = this.props.todos.map(function (todo) {
            return (
                <TodoItem
                    key={todo.id}
                    todo={todo}
                />
            );
        }, this);

        return (
            <section id="main">
                <input
                    id="toggle-all"
                    type="checkbox"
                    checked={this.props.activeTodoCount === 0}
                    onChange={this.handlers.toggleAllChange}
                />
                <ul id="todo-list">
                    {todoItems}
                </ul>
            </section>
        );
    }
}

export default TodoList;

